<template>
  <Dialog :title="dialogTitle" v-model="dialogVisible">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="关联 id" prop="driverId">
        <el-input v-model="formData.driverId" placeholder="请输入关联 id" />
      </el-form-item>
      <el-form-item label="手机运营商" prop="mobileCarrier">
        <el-input v-model="formData.mobileCarrier" placeholder="请输入手机运营商" />
      </el-form-item>
      <el-form-item label="公司标识" prop="companyLogo">
        <el-input v-model="formData.companyLogo" placeholder="请输入公司标识" />
      </el-form-item>
      <el-form-item label="注册地行政区代码" prop="districtCode">
        <el-input v-model="formData.districtCode" placeholder="请输入注册地行政区代码" />
      </el-form-item>
      <el-form-item label="驾驶员出生日期" prop="birthDate">
        <el-date-picker
          v-model="formData.birthDate"
          type="date"
          value-format="x"
          placeholder="选择驾驶员出生日期"
        />
      </el-form-item>
      <el-form-item label="国籍" prop="nationality">
        <el-input v-model="formData.nationality" placeholder="请输入国籍" />
      </el-form-item>
      <el-form-item label="驾驶员民族" prop="ethnic">
        <el-input v-model="formData.ethnic" placeholder="请输入驾驶员民族" />
      </el-form-item>
      <el-form-item label="驾驶证编号" prop="driverLicenseNo">
        <el-input v-model="formData.driverLicenseNo" placeholder="请输入驾驶证编号" />
      </el-form-item>
      <el-form-item label="婚姻" prop="maritalStatus">
        <el-select v-model="formData.maritalStatus" placeholder="请选择婚姻">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.MARRAY)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="外语能力" prop="foreignLang">
        <el-input v-model="formData.foreignLang" placeholder="请输入外语能力" />
      </el-form-item>
      <el-form-item label="使用 APP 版本号" prop="appVersion">
        <el-input v-model="formData.appVersion" placeholder="请输入使用 APP 版本号" />
      </el-form-item>
      <el-form-item label="使用地图类型" prop="mapType">
        <el-select v-model="formData.mapType" placeholder="请选择使用地图类型">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="驾驶员学历" prop="education">
        <el-select v-model="formData.education" placeholder="请选择驾驶员学历">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.STUDENT)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="户口登记机关名称" prop="householdReg">
        <el-input v-model="formData.householdReg" placeholder="请输入户口登记机关名称" />
      </el-form-item>
      <el-form-item label="户口住址" prop="householdAddr">
        <el-input v-model="formData.householdAddr" placeholder="请输入户口住址" />
      </el-form-item>
      <el-form-item label="现居住地址" prop="currentAddr">
        <el-input v-model="formData.currentAddr" placeholder="请输入现居住地址" />
      </el-form-item>
      <el-form-item label="驾驶员照片文件编号" prop="driverPhotoNo">
        <el-input v-model="formData.driverPhotoNo" placeholder="请输入驾驶员照片文件编号" />
      </el-form-item>
      <el-form-item label="驾驶证扫描件文件编号" prop="licenseScanNo">
        <el-input v-model="formData.licenseScanNo" placeholder="请输入驾驶证扫描件文件编号" />
      </el-form-item>
      <el-form-item label="准驾车型" prop="carType">
        <el-select v-model="formData.carType" placeholder="请选择准驾车型">
          <el-option label="请选择字典生成" value="" />
        </el-select>
      </el-form-item>
      <el-form-item label="初次领证日期" prop="licenseFirstDate">
        <el-date-picker
          v-model="formData.licenseFirstDate"
          type="date"
          value-format="x"
          placeholder="选择初次领证日期"
        />
      </el-form-item>
      <el-form-item label="驾驶证有效期限起" prop="licenseValidStart">
        <el-input v-model="formData.licenseValidStart" placeholder="请输入驾驶证有效期限起" />
      </el-form-item>
      <el-form-item label="驾驶证有效期限止" prop="licenseValidEnd">
        <el-input v-model="formData.licenseValidEnd" placeholder="请输入驾驶证有效期限止" />
      </el-form-item>
      <el-form-item label="是否巡游出租车：1-是 0-否" prop="isTaxiDriver">
        <el-select v-model="formData.isTaxiDriver" placeholder="请选择是否巡游出租车：1-是 0-否">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.OR)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="网约车驾驶员资格证号" prop="taxiCertNo">
        <el-input v-model="formData.taxiCertNo" placeholder="请输入网约车驾驶员资格证号" />
      </el-form-item>
      <el-form-item label="资格证发证机构" prop="taxiCertOrg">
        <el-input v-model="formData.taxiCertOrg" placeholder="请输入资格证发证机构" />
      </el-form-item>
      <el-form-item label="资格证发证日期" prop="taxiCertDate">
        <el-date-picker
          v-model="formData.taxiCertDate"
          type="date"
          value-format="x"
          placeholder="选择资格证发证日期"
        />
      </el-form-item>
      <el-form-item label="初次领取资格证日期" prop="taxiCertFirstDate">
        <el-date-picker
          v-model="formData.taxiCertFirstDate"
          type="date"
          value-format="x"
          placeholder="选择初次领取资格证日期"
        />
      </el-form-item>
      <el-form-item label="资格证有效起" prop="taxiCertValidStart">
        <el-input v-model="formData.taxiCertValidStart" placeholder="请输入资格证有效起" />
      </el-form-item>
      <el-form-item label="资格证有效止" prop="taxiCertValidEnd">
        <el-input v-model="formData.taxiCertValidEnd" placeholder="请输入资格证有效止" />
      </el-form-item>
      <el-form-item label="报备日期" prop="reportDate">
        <el-date-picker
          v-model="formData.reportDate"
          type="date"
          value-format="x"
          placeholder="选择报备日期"
        />
      </el-form-item>
      <el-form-item label="是否专职" prop="isFullTime">
        <el-select v-model="formData.isFullTime" placeholder="请选择是否专职">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.OR)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="是否在黑名单" prop="inBlacklist">
        <el-select v-model="formData.inBlacklist" placeholder="请选择是否在黑名单">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.OR)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="服务类型" prop="serviceType">
        <el-select v-model="formData.serviceType" placeholder="请选择服务类型">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.TYPE)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="合同签署公司" prop="contractCompany">
        <el-input v-model="formData.contractCompany" placeholder="请输入合同签署公司" />
      </el-form-item>
      <el-form-item label="紧急联系人" prop="emergencyContact">
        <el-input v-model="formData.emergencyContact" placeholder="请输入紧急联系人" />
      </el-form-item>
      <el-form-item label="紧急联系人电话" prop="emergencyPhone">
        <el-input v-model="formData.emergencyPhone" placeholder="请输入紧急联系人电话" />
      </el-form-item>
      <el-form-item label="紧急联系人通信地址" prop="emergencyAddr">
        <el-input v-model="formData.emergencyAddr" placeholder="请输入紧急联系人通信地址" />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, DICT_TYPE } from '@/utils/dict'
import { ExtendApi, Extend } from '@/api/ride/extend'

/** 司机扩展 表单 */
defineOptions({ name: 'ExtendForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
  id: undefined,
  driverId: undefined,
  mobileCarrier: undefined,
  companyLogo: undefined,
  districtCode: undefined,
  birthDate: undefined,
  nationality: undefined,
  ethnic: undefined,
  driverLicenseNo: undefined,
  maritalStatus: undefined,
  foreignLang: undefined,
  appVersion: undefined,
  mapType: undefined,
  education: undefined,
  householdReg: undefined,
  householdAddr: undefined,
  currentAddr: undefined,
  driverPhotoNo: undefined,
  licenseScanNo: undefined,
  carType: undefined,
  licenseFirstDate: undefined,
  licenseValidStart: undefined,
  licenseValidEnd: undefined,
  isTaxiDriver: undefined,
  taxiCertNo: undefined,
  taxiCertOrg: undefined,
  taxiCertDate: undefined,
  taxiCertFirstDate: undefined,
  taxiCertValidStart: undefined,
  taxiCertValidEnd: undefined,
  reportDate: undefined,
  isFullTime: undefined,
  inBlacklist: undefined,
  serviceType: undefined,
  contractCompany: undefined,
  emergencyContact: undefined,
  emergencyPhone: undefined,
  emergencyAddr: undefined
})
const formRules = reactive({
  driverId: [{ required: true, message: '关联 id不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await ExtendApi.getExtend(id)
    } finally {
      formLoading.value = false
    }
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as Extend
    if (formType.value === 'create') {
      await ExtendApi.createExtend(data)
      message.success(t('common.createSuccess'))
    } else {
      await ExtendApi.updateExtend(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    driverId: undefined,
    mobileCarrier: undefined,
    companyLogo: undefined,
    districtCode: undefined,
    birthDate: undefined,
    nationality: undefined,
    ethnic: undefined,
    driverLicenseNo: undefined,
    maritalStatus: undefined,
    foreignLang: undefined,
    appVersion: undefined,
    mapType: undefined,
    education: undefined,
    householdReg: undefined,
    householdAddr: undefined,
    currentAddr: undefined,
    driverPhotoNo: undefined,
    licenseScanNo: undefined,
    carType: undefined,
    licenseFirstDate: undefined,
    licenseValidStart: undefined,
    licenseValidEnd: undefined,
    isTaxiDriver: undefined,
    taxiCertNo: undefined,
    taxiCertOrg: undefined,
    taxiCertDate: undefined,
    taxiCertFirstDate: undefined,
    taxiCertValidStart: undefined,
    taxiCertValidEnd: undefined,
    reportDate: undefined,
    isFullTime: undefined,
    inBlacklist: undefined,
    serviceType: undefined,
    contractCompany: undefined,
    emergencyContact: undefined,
    emergencyPhone: undefined,
    emergencyAddr: undefined
  }
  formRef.value?.resetFields()
}
</script>
